<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    getBtn.onclick = function () {

        var wd = ""; // 搜索的关键词 (默认 "" => 查询所有数据)
        var col = "id"; // 排序的列名(默认id)
        var type = "asc"; // 排序的方式(默认升序)
        var page = 1;    // 默认显示第一页
        var size = 5;    // 默认每页显示五条

        ajax({
            url: "../php/searchGradeOrderLimit.php",
            data: `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,
            // async: true,
            dataType: "json",
            success: function (res) {
                console.log("请求结束", res);
            }
        })

        ajax({
            // type:"get",
            url: "../php/searchGradeOrderLimit.php",
            data: {
                wd: wd,
                col,
                type,
                page,
                size,
            },
            // async: true,
            dataType: "json",
            success: function (res) {
                console.log("请求结束", res);
            }
        })

    }

    postBtn.onclick = function () {
        var user = "a123123"; // 'a123123'
        var pwd = "123123";

        if (user && pwd) {
            ajax({
                type: "post",
                url: "../php/login.php",
                data: { user: user, pwd },
                // async:true,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                }
            })
        }
    }

    // 问题2: 参数数据拼接的问题
    // 自己拼接 => 太麻烦 => 能否封装一个方法=> 传入参数之后,快捷拼接  
    // "user=a123123&pwd=113123&email=123123@qq.com&phone=17386141517".
    // 分析: 参数数据队列也是以键值对形式存在 => 排名不分先后  => 可以使用对象参数 => 将键值对拼接形成参数数据队列

    // ajax({type="get",url,data,async,dataType,success})

    // options的参数
    // type  请求的方式  get, post
    // url   请求的接口地址
    // data  请求携带数据 (string|object)
    // async 是否异步(默认true)
    // dataType 接口返回数据类型(默认"text" "html" "json") 
    // success  请求成功时执行的回调函数  回调函数有一个参数=>接口返回的数据
    function ajax(options) { // 对象参数{url,data,async,dataType,success}
        // debugger;
        var { type = "get", url, data = "", async = true, dataType = "text", success } = options;

        // success = function (res) {
        //     console.log("请求完成");
        // }

        if (data instanceof Object) {// 如果data是对象 => 解析为参数数据队列
            var list = [];
            for (var key in data) {
                var val = data[key];
                var item = key + "=" + val;  // "user=a123123"
                list.push(item);
            }
            data = list.join("&");
            // console.log(data);
        }

        var xhr = new XMLHttpRequest(); // 0 

        if (type.toLowerCase() === "get") {
            xhr.open("get", data ? url + "?" + data : url, async);  // 1
            xhr.send();
        } else if (type.toLowerCase() === "post") {
            xhr.open("post", url, async);  // 1
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }


        xhr.onreadystatechange = function () {
            // 2 3 4
            // console.log("请求状态改变", xhr.readyState);

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                if (dataType === "json") {
                    result = JSON.parse(xhr.responseText);
                }
                // console.log(result);  //接口返回的数据

                // 判断用户是否存在  => 输出结果
                // 成绩搜索排序分页  => 动态渲染
                // 删除成绩         => 删除结果
                // 每次拿到数据之后要执行的操作 每个接口都不一样 

                if (success) {
                    success(result); // 将接口返回的数据result 作为回调函数的实际参数
                }

            }

        }
    }


</script>

</html>